<template>
  <div class="upload-container">
    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
      upload
    </el-button>
    <el-dialog :visible.sync="dialogVisible">
      fdsf
      <img v-for="item in imgSrc" :key="item" :src="item" alt="">
      <el-upload
        :file-list="fileList"
        :auto-upload="true"
        :before-upload="beforeUpload"
        class="editor-slide-upload"
        action="#"
        list-type="picture-card"
      >
        <el-button size="small" type="primary">
          Click upload
        </el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">
        Cancel
      </el-button>
      <el-button type="primary" @click="handleSubmit">
        Confirm
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'
import { getStorageToken, getObjectAddress } from '@/api/product'

export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      imgSrc: []
    }
  },
  methods: {
    checkAllSuccess() {
      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit() {
      return
    },
    // 图片上传阿里云
    uploadToOss(file) {
      var self = this
      getStorageToken({ identifier: '' }).then(res => {
        console.log(res)
        var data = res.data.token
        const OSS = require('ali-oss')
        var client = new OSS({
          region: 'oss-cn-hangzhou',
          accessKeyId: data.accessKeyId,
          accessKeySecret: data.accessKeySecret,
          bucket: data.bucketName,
          stsToken: data.securityToken
        })
        client.put(data.objectName, file).then(results => {
          console.log('图片上传阿里云', results)
          self.getObjectAddressWay(results.name)
        }).catch(err => {
          console.log(err)
        })
      }).catch(error => {
        console.log('fsdfdsfsdf', error)
      })
    },
    getObjectAddressWay(name) {
      var self = this
      var obj = {
        objectName: name
      }
      getObjectAddress(obj).then(res => {
        console.log('返回的', res)
        self.imgSrc = res.data.imagePath
        self.$emit('successCBK', self.imgSrc)
        self.dialogVisible = false
      }).catch(error => {
        console.log(error)
      })
    },
    beforeUpload(file) {
      console.log('上传==》', file)
      this.listObj = file
      this.uploadToOss(file)
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  ::v-deep .el-upload--picture-card {
    width: 100%;
  }
}

.wscnph {
  width: 50px;
}
</style>
